<template>
  <div>
    <el-card v-show="!showDetail">
      <div class="select_box">
        <el-row>
          <el-col :span="7">
            <div class="title">工程名称</div>
            <el-input style="width:80%" v-model="selectInfo.name" size="small" placeholder="请输入"></el-input>
          </el-col>
          <el-col :span="7">
            <div class="title">工程编号</div>
            <el-input style="width:80%" v-model="selectInfo.code" size="small" placeholder="请输入"></el-input>
          </el-col>
          <el-col :span="7">
            <div class="title">工作负责人</div>
            <el-select style="width:80%" filterable clearable v-model="selectInfo.leader" size="small" placeholder="请选择">
              <user-option></user-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="7">
            <div class="title">施工时间</div>
            <el-date-picker
              style="width:80%"
              v-model="selectInfo.date"
              size="small"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
          <el-col :span="7">
            <div class="title">地点</div>
            <el-input style="width:80%" v-model="selectInfo.location" size="small" placeholder="请输入"></el-input>
          </el-col>
          <el-col :span="7">
            <div class="title">视频督察状态</div>
            <el-select style="width:80%" filterable clearable v-model="selectInfo.workStatus" size="small" placeholder="请选择">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="12">
            <el-button size="small" @click="reset">重置</el-button>
						<el-button type="primary" size="small" @click="handleChangePage">确定</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="table_box">
        <el-table ref="multipleTable" :data="tableData" v-loading="loading">
					<el-table-column prop="name" label="工程名称">
					</el-table-column>
					<el-table-column prop="surveyId" label="工程编号">
					</el-table-column>
          <el-table-column prop="leaderName" label="工作负责人">
					</el-table-column>
          <el-table-column prop="surveyDate" :formatter="dateFormat"  label="勘察时间">
					</el-table-column>
					<el-table-column prop="location" label="地点">
					</el-table-column>
          <el-table-column prop="workStatus" label="视频督察状态">
            <template slot-scope="scope">
							{{ workStatus[scope.row.workStatus] || '' }}
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作">
						<template slot-scope="scope">
							<el-button type="text" @click="videoDetail=scope.row, showDetail=true" size="small">查看详情</el-button>
              <el-button type="text" @click="videoDetail=scope.row, showVideoDialog=true" size="small">视频回放</el-button>
						</template>
					</el-table-column>
				</el-table>
        <div class="footer">
          <el-pagination @current-change="handleChangePage" :current-page.sync="page" :page-size="pageSize" layout="prev, pager, next" :total="total"></el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 视频督察详情 -->
    <div v-if="showDetail">
      <player-view @back="back" :videoDetail="videoDetail"  key="_player_view"></player-view>
    </div>
    <!-- 视频回放 -->
    <el-drawer
			:title="videoDetail.name + ' - 视频回放'"
			:visible.sync="showVideoDialog"
      :destroy-on-close="true"
      :wrapperClosable="false"
			size="80%"
			:direction="'rtl'">
      <video-back :videoDetail="videoDetail"></video-back>
    </el-drawer>
  </div>
</template>

<script>
import { getVideoPage } from '@/api/video/index.js'
import PlayerView from '../liveTest/index.vue'
import UserOption from '@/components/selectOption/users'
import { getDic } from '@/api/utils/index'
import { parseTime } from '@/utils/index.js'
import VideoBack from '../realTime/player'
export default {
  name: 'ticketList',
  components: {
    VideoBack,
    PlayerView,
    UserOption
  },
  data() {
    return {
      showVideoDialog: false,
      loading: false,
      showDetail: false, //展示详情页面
      videoDetail: {name: ''},
      selectInfo: {
        name: '',
        code: '',
        address: '',
        date: [],
				leader: null,
        workStatus: null
      },
      statusList: [],
      workStatus: {
        1: '未开始',
        2: '可督察',
        3: '检查中',
        4: '已完成'
      },
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 100,
    }
  },
  async mounted() {
    await this.getDicList()
    this.handleChangePage()
  },
  methods: {
    async getDicList() {
      getDic('schemeWorkStatus').then(res => {
        const { data } = res
        for (let i in data) {
          this.statusList.push({
            value: parseInt(i),
            label: data[i]
          });
        }
      })
    },
    reset() {
      this.selectInfo = {
        name: '',
        code: '',
        address: '',
        date: [],
				leader: null,
        workStatus: null
      }
    },
    back(){
      this.showDetail = false
    },
    handleChangePage() {
      this.loading = true
      let params = {...this.selectInfo, pageNum: this.page, pageSize: this.pageSize}
      if(params.date && params.date.length > 0) {
        params.startTime = params.date[0]
        params.endTime = params.date[1]
      }
      getVideoPage(params).then(res => {
        const { data } = res
        this.total = data.total
        this.tableData = data.list
        this.loading = false
      }).catch(error => {
        this.loading = false
        console.log(error)
      })
    },
    dateFormat(row, column) {
      var date = row[column.property];
      if(date) {
        return parseTime(date,'{y}-{m}-{d}')
      } else {
        return '-'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.select_box {
  .title {
    font-size: 14px;
    margin-bottom: 10px;
  }
}
.table_box {
  .footer {
    margin-top: 10px;
    text-align: center;
  }
}
</style>
